<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout :: common_header(~{::title})">
    <title>申请退货-订单管理-OMS订单管理系统</title>
    <link rel="stylesheet" type="text/css" href="/css/hy.css">
</head>
<body th:replace="layout :: common_body(~{::div.layui-body})">
<div class="layui-body" style="padding:15px;">
    <style>
        .sp-title {
            position: relative;
            height: 50px;
            margin-bottom: 20px;
            font-size: 15px;
            font-weight: 600;
            border-bottom: 1px solid #ccc;
        }

        .cart-box {
            width: 1100px;
            min-height: 600px;
            margin: 0 auto;
            padding: 30px 0;
            overflow: hidden;
        }

        .cart-head {
            padding: 0 19px;
            margin-bottom: 20px;
            height: 36px;
            line-height: 36px;
            border: 1px solid #f2f2f2;
            background: #f2f2f2;
            font-size: 12px;
            color: #646464;
        }

        .cart-head label i, .cart-foot label i, .group-head label i {
            display: inline-block;
            width: 17px;
            height: 17px;
            margin-right: 10px;
            vertical-align: middle;
            cursor: pointer;
            background: url(../images/tb/c-01.png) 50% no-repeat;
        }

        .cart-head label.active i, .cart-foot label.active i, .group-head label.active i {
            background: url(../images/tb/c-02.png) 50% no-repeat;
        }

        .cart-box .c1, .cart-box .c2, .cart-box .c3, .cart-box .c4, .cart-box .c5, .cart-box .c6 {
            float: left;
            display: inline-block;
        }

        .items li {
            height: 80px;
            padding: 20px;
            border-top: 1px solid #f2f2f2;
        }

        .cart-foot button.active {
            background: #f00;
        }

        .items li span.c1 {
            line-height: 80px;
        }

        .cart-box .c2 {
            width: 455px;
        }

        .cart-box .c3 {
            width: 150px;
        }

        .cart-box .c5 {
            width: 150px;
        }

        .cart-box .c4 {
            width: 150px;
        }

        .cart-foot {
            height: 70px;
            line-height: 70px;
            background: #f2f2f2;
            position: relative;
            overflow: hidden;
        }

        .cart-foot button {
            position: absolute;
            right: 0;
            top: 0;
            width: 140px;
            height: 70px;
            line-height: 70px;
            text-align: center;
            font-size: 18px;
            background: #D7D7D7;
            color: #fff;
            border: 0 none;
            cursor: pointer;
        }

        .cart-foot label {
            margin-left: 20px;
            font-size: 12px;
            color: #646464;
        }

        .group-box {
            border: 1px solid #e6e6e6;
            border-top: 2px solid #976D6A;
            margin-bottom: 20px;
        }

        .items li .i-item {
            width: 350px;
            height: 80px;
            position: relative;
        }

        .items li .i-item img {
            position: absolute;
            left: 0;
            top: 0;
            width: 80px;
            height: 80px;
        }

        .items li .i-item h3 {
            position: absolute;
            left: 100px;
            top: 0;
            font-size: 12px;
            font-weight: normal;
            color: #323232;
        }

        .items li .i-item p {
            position: absolute;
            left: 100px;
            bottom: 0;
            font-size: 12px;
            color: #969696;
        }

        .items li .i-item p b {
            margin-right: 15px;
            font-size: 12px;
        }

        .items li label i {
            display: inline-block;
            width: 17px;
            height: 17px;
            vertical-align: middle;
            cursor: pointer;
            background: url(../images/tb/c-01.png) 50% no-repeat;
        }

        .cart-foot .i-result p span strong {
            font-size: 18px;
            margin: 0 5px;
            color: #f00;
        }

        .items li label input {
            display: none;
        }

        .cart-foot .i-result {
            position: absolute;
            right: 160px;
            top: 0;
            padding: 10px 0;
            line-height: 50px;
            text-align: right;
        }

        .items li label.active i {
            background: url(../images/tb/c-02.png) 50% no-repeat;
        }

        .cart-box .c1 {
            width: 80px;
        }
    </style>
    <div class="hy-main">
        <div class="sp-title"><span>订单售后详情</span></div>
        <div class="goods-wrapper">
            <div class="cart-box">
                <form id="cart_form">
                    <input type="hidden" name="order_id" th:value="${orderId}"/>
                    <input type="hidden" id="shopId" th:value="${shopId}"/>
                    <div class="cart-head">
                        <span class="c1"><label class="i-select"><i></i>全选</label></span>
                        <span class="c2">商品</span>
                        <span class="c3">价格</span>
                        <span class="c5">SKU</span>
                        <span class="c4">退货数量</span>
                    </div>
                    <div class="cart-main" th:if="${items!=null}">
                        <div class="group-box">
                            <div class="group-main">
                                <ul class="items">
                                    <li th:each="item:${items}" class="item">
                                        <input type="hidden" name="items" th:value="${item.getId()}"/>
                                        <span class="c1">
                                            <label class="i-single"><i></i>
                                                <input type="checkbox" name="item[]"
                                                       th:value="${itemStat.index+':'+item.getId()}"/>
                                            </label>
                                        </span>
                                        <span class="c2">
											<div class="i-item">
												<img th:src="${item.getGoodsImg()}">
												<h3><a th:text="${item.getGoodsName()}">HERSCITY连衣裙碎花系带喇叭袖长袖显瘦百褶中长款连衣裙女</a></h3>
												<p>
                                                    <strong></strong><b th:text="${item.getGoodsSpec()}"></b>
                                                    <br>
                                                    <b>购买数量：[[${item.quantity}]]</b>&nbsp;<b>已退货数量：[[${item.refundCount}]]</b>
                                                </p>
											</div>
										</span>
                                        <span class="c3"><b class="i-new"
                                                            th:text="${'¥'+#numbers.formatDecimal(item.goodsPrice,1,2)}">¥99.00</b></span>
                                        <span class="c5"><strongorder_list
                                                th:text="${item.getGoodsSpecNum()}">¥99.00</strongorder_list></span>

                                        <span class="c4">
                                            <div class="i-count">
                                                <input style="text-align: center;width: 50px;" type="text"
                                                       name="count[]" value="0"/>
                                            </div>
										</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="layui-form-item" >
                            <label class="layui-form-label">物流公司</label>
                            <div class="layui-input-block">
                                <input type="text" name="logisticsCompany" lay-verify="required" autocomplete="off" placeholder="物流公司" class="layui-input" width="200px">
                            </div>
                        </div>
                        <div class="layui-form-item " >
                            <label class="layui-form-label">快递单号</label>
                            <div class="layui-input-block">
                                <input type="text" name="logisticsCode" lay-verify="required" autocomplete="off" placeholder="快递单号" class="layui-input" width="200px">
                            </div>
                        </div>
                    </div>
                    <div class="cart-foot">
                        <div class="c1"><label class="i-select"><i></i>全选</label></div>
                        <div class="i-result">
                            <p><span>已选商品<strong id="good_num">0</strong>件</span></span></p>
                        </div>
                        <button id="pdd_sub_btn">提交售后</button>
                    </div>
                </form>
            </div>
        </div>
        <script type="text/javascript" src="/_js/order_cancel_offline.js"></script>
    </div> <!-- end hy-main -->
</div>
</body>
</html>
